﻿<UserControl x:Class="Me.MeWidget" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="#0f92d6" ClipToBounds="True" DragEnter="UserControlDragEnter" Drop="UserControlDrop" MouseLeftButtonDown="UserControl_MouseLeftButtonDown" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave">
    <UserControl.Resources>
        <Style x:Key="MetroButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="12.5"/>
            <Setter Property="Padding" Value="5,4,4,5"/>
            <Setter Property="BorderBrush" Value="LightGray"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <!-- We use Grid as a root because it is easy to add more elements to customize the button -->
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>

                            <!-- Content Presenter is where the text content etc is placed by the control -->
                            <!-- The bindings are useful so that the control can be parameterized without editing the template -->
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </Grid>

                        <!--Each state sets a brush on the Border in the template -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="White" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="Black" TargetName="Border"/>
                                <Setter Property="Foreground" Value="Black"/>
                                <Setter Property="FontSize" Value="14"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="true"/>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="BorderBrush" Value="Gray" TargetName="Border"/>
                                <Setter Property="Foreground" Value="Gray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Key="TileAnim">
            <DoubleAnimation Storyboard.TargetName="UserPicTranslate" Storyboard.TargetProperty="Y" AccelerationRatio="0.3" DecelerationRatio="0.7" Duration="0:0:0.4" From="0" To="90" />
            <ThicknessAnimation Storyboard.TargetName="UserName" Storyboard.TargetProperty="Margin" AccelerationRatio="0.3" DecelerationRatio="0.7" Duration="0:0:0.4" From="10,0,10,170" To="10,3,10,80" />
            <DoubleAnimation Storyboard.TargetName="UserPicTranslate" Storyboard.TargetProperty="Y" AccelerationRatio="0.3" BeginTime="0:0:4.5" DecelerationRatio="0.7" Duration="0:0:0.4" To="180" />
            <ThicknessAnimation Storyboard.TargetName="UserName" Storyboard.TargetProperty="Margin" AccelerationRatio="0.3" BeginTime="0:0:4.5" DecelerationRatio="0.7" Duration="0:0:0.4" To="10,0,10,0" />
            <DoubleAnimation Storyboard.TargetName="UserPicTranslate" Storyboard.TargetProperty="Y" AccelerationRatio="0.3" BeginTime="0:0:8.5" DecelerationRatio="0.7" Duration="0:0:0.3" To="0" />
            <ThicknessAnimation Storyboard.TargetName="UserName" Storyboard.TargetProperty="Margin" AccelerationRatio="0.3" BeginTime="0:0:8.5" DecelerationRatio="0.7" Duration="0:0:0.4" To="10,0,10,170" />
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <TextBlock Margin="10,0,10,170" FontSize="32" Foreground="White" HorizontalAlignment="Left" Name="UserName" Text="User" TextWrapping="Wrap" VerticalAlignment="Bottom" />
        <Rectangle Height="Auto" Width="Auto" HorizontalAlignment="Stretch" Stroke="#30FFFFFF" StrokeThickness="1" VerticalAlignment="Stretch" />
        <Image Name="UserPic" Stretch="UniformToFill">
            <Image.RenderTransform>
                <TranslateTransform x:Name="UserPicTranslate" />
            </Image.RenderTransform>
        </Image>
        <DockPanel x:Name="Options" Background="#96000000" Height="30" VerticalAlignment="Bottom">
            <DockPanel.RenderTransform>
                <TranslateTransform x:Name="OptionsTranslate" Y="0" />
            </DockPanel.RenderTransform>
            <Button Grid.Column="0" Content="Logoff" Name="Button_Logoff" BorderThickness="0" BorderBrush="{x:Null}" Style="{StaticResource MetroButton}" Background="#96000000" Click="Button_Logoff_Click" />
            <Button Grid.Column="1" Content="Restart" Name="Button_Restart" BorderThickness="0" BorderBrush="{x:Null}" Style="{StaticResource MetroButton}" Background="#96000000" Click="Button_Restart_Click" />
            <Button Grid.Column="2" Content="Shutdown" Name="Button_Shutdown" BorderThickness="0" BorderBrush="{x:Null}" Style="{StaticResource MetroButton}" Background="#96000000" Click="Button_Shutdown_Click" />
        </DockPanel>
    </Grid>
</UserControl>